<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标签学习指南 - 完整参考手册</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
          sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f5f5f5;
      }
      
      header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem 0;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
      }
      
      h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        font-weight: 700;
      }
      
      h2 {
        font-size: 2rem;
        margin: 2rem 0 1rem;
        color: #4a5568;
        border-bottom: 3px solid #667eea;
        padding-bottom: 0.5rem;
      }
      
      h3 {
        font-size: 1.5rem;
        margin: 1.5rem 0 1rem;
        color: #2d3748;
      }
      
      p {
        margin-bottom: 1rem;
      }
      
      .tag-categories {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
        margin-top: 2rem;
      }
      
      .category-card {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      
      .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      
      .tag-list {
        margin-top: 1rem;
      }
      
      .tag-item {
        margin-bottom: 1.5rem;
      }
      
      .tag-name {
        font-family: 'Courier New', monospace;
        background: #f7fafc;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
        color: #667eea;
        border: 1px solid #e2e8f0;
      }
      
      .tag-description {
        margin: 0.5rem 0;
        color: #4a5568;
      }
      
      .tag-example {
        background: #1a202c;
        color: #e2e8f0;
        padding: 1rem;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        overflow-x: auto;
        font-size: 0.9rem;
        white-space: pre-wrap;
      }
      
      .tag-result {
        margin-top: 1rem;
        padding: 1rem;
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
      }
      
      .tag-attributes {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #718096;
      }
      
      .attribute {
        display: inline-block;
        background: #e2e8f0;
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
      }
      
      .back-to-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        background: #667eea;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .back-to-top.visible {
        opacity: 1;
      }
      
      .back-to-top:hover {
        background: #5a67d8;
      }
      
      @media (max-width: 768px) {
        .tag-categories {
          grid-template-columns: 1fr;
        }
        
        h1 {
          font-size: 2rem;
        }
        
        h2 {
          font-size: 1.5rem;
        }
        
        h3 {
          font-size: 1.25rem;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <h1>HTML标签学习指南</h1>
        <p>全面了解HTML的各种标签及其用法，从基础到高级</p>
      </div>
    </header>
    
    <div class="container">
      <section>
        <h2>HTML标签概述</h2>
        <p>HTML（超文本标记语言）是构建网页的基础。本指南按功能分类介绍了各种HTML标签，包括它们的语法、用途和示例。通过学习这些标签，您可以创建结构良好、语义清晰的网页内容。</p>
      </section>
      
      <div class="tag-categories">
        <!-- 基础结构标签 -->
        <div class="category-card">
          <h3>基础结构标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;!DOCTYPE html&gt;</div>
              <div class="tag-description">定义HTML文档类型，告诉浏览器使用哪个HTML版本解析页面</div>
              <div class="tag-example">&lt;!DOCTYPE html&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;html&gt;</div>
              <div class="tag-description">HTML文档的根元素</div>
              <div class="tag-attributes">
                <span class="attribute">lang</span>
              </div>
              <div class="tag-example">&lt;html lang="zh-CN"&gt;
  &lt;!-- 文档内容 --&gt;
&lt;/html&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;head&gt;</div>
              <div class="tag-description">包含文档的元数据，如标题、样式、脚本等</div>
              <div class="tag-example">&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;body&gt;</div>
              <div class="tag-description">包含可见的页面内容</div>
              <div class="tag-example">&lt;body&gt;
  &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/body&gt;</div>
            </div>
          </div>
        </div>
        
        <!-- 文本内容标签 -->
        <div class="category-card">
          <h3>文本内容标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;h1&gt; 至 &lt;h6&gt;</div>
              <div class="tag-description">定义标题，h1是最大的标题，h6是最小的标题</div>
              <div class="tag-example">&lt;h1&gt;一级标题&lt;/h1&gt;
&lt;h2&gt;二级标题&lt;/h2&gt;</div>
              <div class="tag-result">
                <h1 style="font-size:1.5rem;">一级标题</h1>
                <h2 style="font-size:1.2rem;">二级标题</h2>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;p&gt;</div>
              <div class="tag-description">定义段落</div>
              <div class="tag-example">&lt;p&gt;这是一个段落文本。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是一个段落文本。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;a&gt;</div>
              <div class="tag-description">定义超链接</div>
              <div class="tag-attributes">
                <span class="attribute">href</span>
                <span class="attribute">target</span>
              </div>
              <div class="tag-example">&lt;a href="https://www.example.com" target="_blank"&gt;访问示例网站&lt;/a&gt;</div>
              <div class="tag-result">
                <a href="#" target="_blank">访问示例网站</a>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;br&gt;</div>
              <div class="tag-description">插入换行符</div>
              <div class="tag-example">&lt;p&gt;第一行&lt;br&gt;第二行&lt;/p&gt;</div>
              <div class="tag-result">
                <p>第一行<br>第二行</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;hr&gt;</div>
              <div class="tag-description">定义水平线</div>
              <div class="tag-example">&lt;p&gt;内容上方&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;内容下方&lt;/p&gt;</div>
              <div class="tag-result">
                <p>内容上方</p>
                <hr>
                <p>内容下方</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 文本格式化标签 -->
        <div class="category-card">
          <h3>文本格式化标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;strong&gt;</div>
              <div class="tag-description">定义重要文本（粗体）</div>
              <div class="tag-example">&lt;p&gt;这是&lt;strong&gt;重要文本&lt;/strong&gt;。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是<strong>重要文本</strong>。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;em&gt;</div>
              <div class="tag-description">定义强调文本（斜体）</div>
              <div class="tag-example">&lt;p&gt;这是&lt;em&gt;强调文本&lt;/em&gt;。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是<em>强调文本</em>。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;u&gt;</div>
              <div class="tag-description">定义下划线文本</div>
              <div class="tag-example">&lt;p&gt;这是&lt;u&gt;下划线文本&lt;/u&gt;。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是<u>下划线文本</u>。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;s&gt;</div>
              <div class="tag-description">定义删除线文本</div>
              <div class="tag-example">&lt;p&gt;这是&lt;s&gt;删除线文本&lt;/s&gt;。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是<s>删除线文本</s>。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;code&gt;</div>
              <div class="tag-description">定义计算机代码</div>
              <div class="tag-example">&lt;p&gt;使用&lt;code&gt;console.log()&lt;/code&gt;输出信息。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>使用<code>console.log()</code>输出信息。</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 列表标签 -->
        <div class="category-card">
          <h3>列表标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;ul&gt;</div>
              <div class="tag-description">定义无序列表</div>
              <div class="tag-example">&lt;ul&gt;
  &lt;li&gt;项目1&lt;/li&gt;
  &lt;li&gt;项目2&lt;/li&gt;
&lt;/ul&gt;</div>
              <div class="tag-result">
                <ul>
                  <li>项目1</li>
                  <li>项目2</li>
                </ul>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;ol&gt;</div>
              <div class="tag-description">定义有序列表</div>
              <div class="tag-attributes">
                <span class="attribute">start</span>
                <span class="attribute">type</span>
              </div>
              <div class="tag-example">&lt;ol&gt;
  &lt;li&gt;第一步&lt;/li&gt;
  &lt;li&gt;第二步&lt;/li&gt;
&lt;/ol&gt;</div>
              <div class="tag-result">
                <ol>
                  <li>第一步</li>
                  <li>第二步</li>
                </ol>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;li&gt;</div>
              <div class="tag-description">定义列表项，用于ul或ol中</div>
              <div class="tag-example">&lt;li&gt;列表项内容&lt;/li&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;dl&gt;, &lt;dt&gt;, &lt;dd&gt;</div>
              <div class="tag-description">定义描述列表、术语和描述</div>
              <div class="tag-example">&lt;dl&gt;
  &lt;dt&gt;HTML&lt;/dt&gt;
  &lt;dd&gt;超文本标记语言&lt;/dd&gt;
  &lt;dt&gt;CSS&lt;/dt&gt;
  &lt;dd&gt;层叠样式表&lt;/dd&gt;
&lt;/dl&gt;</div>
              <div class="tag-result">
                <dl>
                  <dt>HTML</dt>
                  <dd>超文本标记语言</dd>
                  <dt>CSS</dt>
                  <dd>层叠样式表</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 媒体标签 -->
        <div class="category-card">
          <h3>媒体标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;img&gt;</div>
              <div class="tag-description">定义图像</div>
              <div class="tag-attributes">
                <span class="attribute">src</span>
                <span class="attribute">alt</span>
                <span class="attribute">width</span>
                <span class="attribute">height</span>
              </div>
              <div class="tag-example">&lt;img src="image.jpg" alt="描述文本" width="300" height="200"&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;audio&gt;</div>
              <div class="tag-description">定义音频内容</div>
              <div class="tag-attributes">
                <span class="attribute">src</span>
                <span class="attribute">controls</span>
              </div>
              <div class="tag-example">&lt;audio src="audio.mp3" controls&gt;&lt;/audio&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;video&gt;</div>
              <div class="tag-description">定义视频内容</div>
              <div class="tag-attributes">
                <span class="attribute">src</span>
                <span class="attribute">controls</span>
                <span class="attribute">width</span>
              </div>
              <div class="tag-example">&lt;video src="video.mp4" controls width="400"&gt;&lt;/video&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;iframe&gt;</div>
              <div class="tag-description">定义内联框架，用于嵌入另一个HTML页面</div>
              <div class="tag-attributes">
                <span class="attribute">src</span>
                <span class="attribute">width</span>
                <span class="attribute">height</span>
                <span class="attribute">frameborder</span>
              </div>
              <div class="tag-example">&lt;iframe src="https://www.example.com" width="400" height="300" frameborder="0"&gt;&lt;/iframe&gt;</div>
            </div>
          </div>
        </div>
        
        <!-- 表单标签 -->
        <div class="category-card">
          <h3>表单标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;form&gt;</div>
              <div class="tag-description">定义表单，用于收集用户输入</div>
              <div class="tag-attributes">
                <span class="attribute">action</span>
                <span class="attribute">method</span>
              </div>
              <div class="tag-example">&lt;form action="/submit" method="post"&gt;
  &lt;!-- 表单控件 --&gt;
&lt;/form&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;input&gt;</div>
              <div class="tag-description">定义输入控件</div>
              <div class="tag-attributes">
                <span class="attribute">type</span>
                <span class="attribute">name</span>
                <span class="attribute">value</span>
                <span class="attribute">placeholder</span>
              </div>
              <div class="tag-example">&lt;input type="text" name="username" placeholder="请输入用户名"&gt;</div>
              <div class="tag-result">
                <input type="text" name="username" placeholder="请输入用户名" style="padding: 0.5rem; border: 1px solid #ddd;">
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;textarea&gt;</div>
              <div class="tag-description">定义多行文本输入控件</div>
              <div class="tag-attributes">
                <span class="attribute">name</span>
                <span class="attribute">rows</span>
                <span class="attribute">cols</span>
              </div>
              <div class="tag-example">&lt;textarea name="message" rows="4" cols="50"&gt;默认文本&lt;/textarea&gt;</div>
              <div class="tag-result">
                <textarea name="message" rows="4" cols="50" style="padding: 0.5rem; border: 1px solid #ddd;">默认文本</textarea>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;select&gt;, &lt;option&gt;</div>
              <div class="tag-description">定义下拉列表和选项</div>
              <div class="tag-example">&lt;select name="gender"&gt;
  &lt;option value="male"&gt;男&lt;/option&gt;
  &lt;option value="female"&gt;女&lt;/option&gt;
&lt;/select&gt;</div>
              <div class="tag-result">
                <select name="gender" style="padding: 0.5rem; border: 1px solid #ddd;">
                  <option value="male">男</option>
                  <option value="female">女</option>
                </select>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;button&gt;</div>
              <div class="tag-description">定义按钮</div>
              <div class="tag-attributes">
                <span class="attribute">type</span>
              </div>
              <div class="tag-example">&lt;button type="submit"&gt;提交&lt;/button&gt;</div>
              <div class="tag-result">
                <button type="submit" style="padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 4px;">提交</button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 结构标签 -->
        <div class="category-card">
          <h3>语义化结构标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;header&gt;</div>
              <div class="tag-description">定义文档或节的页眉</div>
              <div class="tag-example">&lt;header&gt;
  &lt;h1&gt;网站标题&lt;/h1&gt;
  &lt;nav&gt;导航菜单&lt;/nav&gt;
&lt;/header&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;nav&gt;</div>
              <div class="tag-description">定义导航链接的部分</div>
              <div class="tag-example">&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#home"&gt;首页&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about"&gt;关于&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;main&gt;</div>
              <div class="tag-description">定义文档的主要内容</div>
              <div class="tag-example">&lt;main&gt;
  &lt;section&gt;
    &lt;h2&gt;主要内容&lt;/h2&gt;
    &lt;p&gt;内容文本&lt;/p&gt;
  &lt;/section&gt;
&lt;/main&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;section&gt;</div>
              <div class="tag-description">定义文档中的节（section）</div>
              <div class="tag-example">&lt;section&gt;
  &lt;h2&gt;章节标题&lt;/h2&gt;
  &lt;p&gt;章节内容&lt;/p&gt;
&lt;/section&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;article&gt;</div>
              <div class="tag-description">定义独立的、完整的内容块</div>
              <div class="tag-example">&lt;article&gt;
  &lt;h2&gt;文章标题&lt;/h2&gt;
  &lt;p&gt;文章内容&lt;/p&gt;
&lt;/article&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;aside&gt;</div>
              <div class="tag-description">定义侧边栏或内容之外的内容</div>
              <div class="tag-example">&lt;aside&gt;
  &lt;h3&gt;相关链接&lt;/h3&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;相关内容1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/aside&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;footer&gt;</div>
              <div class="tag-description">定义文档或节的页脚</div>
              <div class="tag-example">&lt;footer&gt;
  &lt;p&gt;© 2024 版权所有&lt;/p&gt;
&lt;/footer&gt;</div>
            </div>
          </div>
        </div>
        
        <!-- 表格标签 -->
        <div class="category-card">
          <h3>表格标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;table&gt;</div>
              <div class="tag-description">定义表格</div>
              <div class="tag-example">&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;表头1&lt;/th&gt;
      &lt;th&gt;表头2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;单元格1&lt;/td&gt;
      &lt;td&gt;单元格2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</div>
              <div class="tag-result">
                <table border="1" style="border-collapse: collapse; width: 100%;">
                  <thead>
                    <tr>
                      <th>表头1</th>
                      <th>表头2</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>单元格1</td>
                      <td>单元格2</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;tr&gt;</div>
              <div class="tag-description">定义表格行</div>
              <div class="tag-example">&lt;tr&gt;
  &lt;td&gt;单元格1&lt;/td&gt;
  &lt;td&gt;单元格2&lt;/td&gt;
&lt;/tr&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;th&gt;, &lt;td&gt;</div>
              <div class="tag-description">定义表头单元格和数据单元格</div>
              <div class="tag-example">&lt;th&gt;表头&lt;/th&gt;
&lt;td&gt;数据&lt;/td&gt;</div>
            </div>
          </div>
        </div>
        
        <!-- 其他常用标签 -->
        <div class="category-card">
          <h3>其他常用标签</h3>
          <div class="tag-list">
            <div class="tag-item">
              <div class="tag-name">&lt;div&gt;</div>
              <div class="tag-description">定义文档中的块级容器</div>
              <div class="tag-attributes">
                <span class="attribute">class</span>
                <span class="attribute">id</span>
              </div>
              <div class="tag-example">&lt;div class="container"&gt;
  &lt;p&gt;内容&lt;/p&gt;
&lt;/div&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;span&gt;</div>
              <div class="tag-description">定义文档中的行内容器</div>
              <div class="tag-example">&lt;p&gt;这是&lt;span style="color: red;"&gt;红色&lt;/span&gt;文本。&lt;/p&gt;</div>
              <div class="tag-result">
                <p>这是<span style="color: red;">红色</span>文本。</p>
              </div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;meta&gt;</div>
              <div class="tag-description">定义HTML文档的元数据</div>
              <div class="tag-attributes">
                <span class="attribute">charset</span>
                <span class="attribute">name</span>
                <span class="attribute">content</span>
              </div>
              <div class="tag-example">&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;link&gt;</div>
              <div class="tag-description">定义文档与外部资源的关系</div>
              <div class="tag-attributes">
                <span class="attribute">rel</span>
                <span class="attribute">href</span>
              </div>
              <div class="tag-example">&lt;link rel="stylesheet" href="styles.css"&gt;</div>
            </div>
            
            <div class="tag-item">
              <div class="tag-name">&lt;script&gt;</div>
              <div class="tag-description">定义客户端脚本</div>
              <div class="tag-attributes">
                <span class="attribute">src</span>
                <span class="attribute">type</span>
              </div>
              <div class="tag-example">&lt;script src="script.js"&gt;&lt;/script&gt;
&lt;script&gt;
  console.log('Hello World');
&lt;/script&gt;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <a href="#top" class="back-to-top" id="backToTop" title="回到顶部">↑</a>
    
    <script>
      // 回到顶部按钮功能
      const backToTopButton = document.getElementById('backToTop');
      
      window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
          backToTopButton.classList.add('visible');
        } else {
          backToTopButton.classList.remove('visible');
        }
      });
      
      backToTopButton.addEventListener('click', (e) => {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    </script>
  </body>
</html>
